<template>
  <div>
    <el-dialog v-model="dialogVisible" width="720px" lock-scroll>
      <template v-slot:header>
        <div class="dialog-title">
          百昌师爷AI，您不良资产领域的智慧助手，致力于为您提供高效、精准的专业服务。我们的两大核心功能——尽调报告与智能问答，将为您的业务发展注入强劲动力
        </div>
      </template>
      <div class="dialog-main">
        <div class="dialog-item">
          <div class="item-title">尽调报告，一键速达，洞见未来</div>
          <div class="item-content">
            师爷AI通过大模型驱动，能够极速生成尽调报告，让您省时省力。这份报告不仅全面覆盖司法、工商、税务等多维数据，还通过深度挖掘，为您提供全面、深入的洞察。合法司法大数据与先进算法的完美结合，为您的决策提供全面合规支撑，让您的决策更快更准。尽调报告，是您掌控风险、把握机遇的重要工具。
          </div>
        </div>
        <div class="dialog-item">
          <div class="item-title">智能问答，即时响应，专业解答</div>
          <div class="item-content">
            面对不良资产领域的法律问题，师爷AI的智能问答系统能够即时响应用户需求，随时随地为您提供专业的法律解答。我们准确理解您的问题意图，确保每一次回答都专业、准确。无论是复杂的法律条款还是繁琐的案例分析，智能问答都能为您一一解答，让您的工作更加简单高效。
          </div>
        </div>
        <div class="main-footer">选择百昌师爷AI，让您的业务决策更加明智，工作效率显著提升。</div>
      </div>
      <template v-slot:footer>
        <span class="dialog-footer">
          <el-button @click="closeFn" round
            >去使用<el-icon style="vertical-align: middle; margin-left: 5px"> <Right /> </el-icon
          ></el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"
const dialogVisible = ref(false)
const closeFn = () => {
  dialogVisible.value = false
}
defineExpose({ dialogVisible })
</script>

<style lang="scss" scoped>
:deep(.el-dialog) {
  padding: 0 !important;
  .el-dialog__header {
    padding: 0;
  }
  .el-dialog__footer {
    border-top: none;
    padding-top: 0;
  }
}
.dialog-title {
  width: 100%;
  // height: 118px;
  background: url("../../../assets/chat/dialogBgc.png") no-repeat center center;
  background-size: cover;
  color: #333;
  font-family: "PingFang SC";
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 34px; /* 141.667% */
  letter-spacing: 1px;
  margin-bottom: 20px;
  padding: 20px 60px 20px 20px;
  border-radius: 20px 20px 0 0;
  text-align: left;
}
.dialog-main {
  padding: 0 23px;
  height: 230px;
  overflow: auto;
  .describe {
    color: #666;
    font-family: "PingFang SC";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
  }
  .dialog-item {
    margin-top: 20px;
    &:first-child {
      margin-top: 0;
    }
    .item-title {
      color: #333;
      font-family: "PingFang SC";
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: 19px;
      margin-bottom: 5px;
      padding-left: 20px;
      position: relative;
      &::before {
        content: "";
        width: 10px;
        height: 10px;
        position: absolute;
        border-radius: 50%;
        top: 5px;
        left: 5px;
        background: #5577ff;
      }
    }
    .item-content {
      color: #666;
      font-family: "PingFang SC";
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 20px;
      margin-left: 5px;
    }
  }
  .main-footer {
    color: #333;
    margin-top: 5px;
    font-family: "PingFang SC";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin-left: 5px;
  }
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  padding: 23px;
  .el-button {
    background-image: linear-gradient(128deg, #4672ff -1.27%, #7daafc 109.62%);
    color: #fff;
    width: 113px;
    height: 32px;
    text-align: center;
    font-family: "PingFang SC";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
  }
}
</style>
